<template>
  <div class="login-container">
    <el-row class="login-wrapper" justify="center" align="middle">
      <el-col :xs="24" :sm="12" :md="10" :lg="8">
        <el-card class="login-card" shadow="always">
          <!-- 标题部分 -->
          <div class="login-header">
            <h1 class="title">Welcome Back</h1>
            <p class="subtitle">Please login to continue</p>
          </div>

          <!-- 登录表单 -->
          <el-form
            :model="loginForm"
            ref="loginFormRef"
            @keyup.enter="handleLogin"
          >
            <!-- 用户名输入 -->
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                :prefix-icon="User"
                size="large"
              />
            </el-form-item>

            <!-- 密码输入 -->
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                :prefix-icon="Lock"
                size="large"
                show-password
              />
            </el-form-item>

            <!-- 记住我 & 忘记密码 -->
            <div class="login-options">
              <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
              <el-link type="primary">忘记密码?</el-link>
            </div>

            <!-- 登录按钮 -->
            <el-button
              type="primary"
              size="large"
              :loading="loading"
              @click="handleLogin"
              class="login-btn"
            >
              立即登录
            </el-button>

            <!-- 注册引导 -->
            <div class="register-guide">
              <span class="tip">没有账号？</span>
              <el-link
                type="primary"
                :underline="false"
                class="register-btn"
                @click="handleRegister"
              >
                立即注册
              </el-link>
            </div>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import ElMsg from "@/utils/globalElMsg";
const router = useRouter();
import { ref, reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormInstance, FormRules } from "element-plus";

const loginFormRef = ref<FormInstance>();
const loading = ref(false);
const rememberMe = ref(false);

const loginForm = reactive({
  username: "",
  password: "",
});

const handleLogin = async () => {
  try {
    loading.value = true;
    await loginFormRef.value?.validate();
    // 这里添加实际登录逻辑
    console.log(loginForm);
    const userType = "admin";
    if (userType === "commonUser") {
      ElMsg.successMsg("登陆成功");
      router.push("/user/home");
    }
    if (userType === "seller") {
      ElMsg.successMsg("登陆成功");
      router.push("/seller");
    }
    if (userType === "admin") {
      ElMsg.successMsg("登陆成功");
      router.push("/admin");
    }
  } finally {
    loading.value = false;
  }
};

const handleRegister = () => {
  // 跳转到注册页面或打开注册弹窗
  router.push("/user/register");
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;

  .login-wrapper {
    width: 100%;
    padding: 20px;
  }

  .login-card {
    border-radius: 15px;
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    .login-header {
      text-align: center;
      margin-bottom: 30px;

      .title {
        color: #2d3748;
        font-size: 2rem;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #718096;
        font-size: 0.9rem;
      }
    }

    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
    }

    .login-btn {
      width: 100%;
      margin-top: 10px;
      letter-spacing: 2px;
      font-weight: bold;
    }

    .register-guide {
      text-align: center;
      margin-top: 25px;
      padding-top: 20px;
      border-top: 1px solid #e2e8f0;

      .tip {
        color: #718096;
        margin-right: 8px;
      }

      .register-btn {
        font-weight: 500;
        font-size: 0.95rem;
        transition: color 0.3s ease;

        &:hover {
          color: #4a9eff;
        }
      }
    }
  }
}
</style>
